﻿<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Slot Usage</title>
    <script src="https://unpkg.com/vue@3.2.4"></script>
    <script src="../../dist/vue-tree.umd.js"></script>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="../../dist/vue-tree.css">
  </head>
  <body>
    <div class="container">
      <h1>Slot Treeview Demo</h1>
      <div id="app">
        <div id="app">
          <tree id="customtree" :initial-model="model">

            <template #text="{ model, customClasses }">
              <span>{{ model[model.treeNodeSpec.labelProperty] }}. Custom Classes: {{ JSON.stringify(customClasses) }}</span>
            </template>

            <template #checkbox="{ model, customClasses, inputId, checkboxChangeHandler }">
              <label :for="inputId" :title="model.treeNodeSpec.title">

                <input :id="inputId"
                       type="checkbox"
                       :disabled="model.treeNodeSpec.state.input.disabled" v-model="model.treeNodeSpec.state.input.value"
                       @change="checkboxChangeHandler" />

                <em style="max-width: 6rem">{{ model[model.treeNodeSpec.labelProperty] }}. Custom Classes: {{ JSON.stringify(customClasses) }}</em>
              </label>
            </template>

            <template #radio="{ model, customClasses, inputId, inputModel, radioChangeHandler }">
              <label :for="inputId" :title="model.treeNodeSpec.title">

                <input :id="inputId"
                       type="radio"
                       :name="model.treeNodeSpec.input.name"
                       :value="model.treeNodeSpec.input.value"
                       :disabled="model.treeNodeSpec.state.input.disabled"
                       v-model="inputModel"
                       @change="radioChangeHandler" />

                <span style="font-weight: bolder">{{ model[model.treeNodeSpec.labelProperty] }}. Custom Classes: {{ JSON.stringify(customClasses) }}</span>
              </label>
            </template>

            <template #loading="{ model, customClasses }">
              <span class="grtvn-loading">
                LOADING PLACHOLDER FOR CHILDREN OF {{ model[model.treeNodeSpec.labelProperty] }}. Custom Classes: {{ JSON.stringify(customClasses) }}
              </span>
            </template>
          </tree>
        </div>
      </div>
    </div>

    <script type='module'>
    import slotsData from './slots.js';

    Vue.createApp({
      components: {
        tree: window['vue-tree']
      },
      data() {
        return {
          model: slotsData,
          checkedNodes: []
        };
      },
      methods: {
        refreshCheckedList() {
          this.checkedNodes = this.$refs.tree.getCheckedCheckboxes();
        }
      }
    }).mount('#app')
    </script>
  </body>
</html>